<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>VR功能管理</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/vr.css">
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>

<!-- 主体结构 -->
<main class="page-layout">

    <!-- 工具面板 -->
    <aside class="tool-panel">

        <!-- 设备状态监控 -->
        <section class="device-monitor">
            <h2>设备状态监控</h2>
            <button class="add-device-btn">+ 新建设备</button>
            <table class="status-table" id="deviceTable">
                <tr><th>设备ID</th><th>连接状态</th><th>电量</th><th>最后使用时间</th></tr>
                <tr><td>VR001</td><td>已连接</td><td>85%</td><td>2024-07-10 14:30</td></tr>
                <tr><td>VR002</td><td>断开中</td><td>40%</td><td>2024-07-10 13:15</td></tr>
            </table>
        </section>

        <!-- 控制面板 -->
        <section class="control-panel">
            <h2>设备控制</h2>
            <div class="control-buttons">
                <button class="btn">连接设备</button>
                <button class="btn">断开设备</button>
                <button class="btn">重启设备</button>
                <button class="btn">固件升级</button>
            </div>
        </section>

        <!-- 场景列表 -->
        <section class="scene-list">
            <h2>可用VR场景</h2>
            <ul class="vr-scenes">
                <li><a href="#">城市漫游体验</a></li>
                <li><a href="#">虚拟展厅参观</a></li>
                <li><a href="#">建筑模型预览</a></li>
                <li><a href="#">室内空间展示</a></li>
                <li><a href="#">历史遗址复原</a></li>
            </ul>
        </section>

    </aside>

    <!-- 工作区：主内容 -->
    <section class="workspace">

        <!-- 实时状态图表 -->
        <section class="realtime-chart">
            <h2>设备实时状态 - 电量趋势</h2>
            <div class="chart-placeholder" id="chart-container" style="width: 100%; max-width: 960px; height: 300px;"></div>
        </section>

        <!-- 用户使用记录 -->
        <section class="usage-log">
            <h2>用户使用记录</h2>
            <table class="log-table">
                <tr><th>用户</th><th>使用场景</th><th>开始时间</th><th>结束时间</th></tr>
                <tr><td>张三</td><td>城市漫游体验</td><td>2024-07-10 10:00</td><td>2024-07-10 10:45</td></tr>
                <tr><td>李四</td><td>建筑模型预览</td><td>2024-07-10 09:15</td><td>2024-07-10 09:50</td></tr>
                <tr><td>王五</td><td>虚拟展厅参观</td><td>2024-07-10 08:30</td><td>2024-07-10 09:10</td></tr>
            </table>
        </section>

    </section>

    <!-- 侧边栏 -->
    <aside class="side-panel">

        <!-- 快速操作 -->
        <section class="quick-actions">
            <h3>快捷操作</h3>
            <ul class="action-list">
                <li><a href="#" class="action-btn">刷新设备状态</a></li>
                <li><a href="#" class="action-btn">查看日志详情</a></li>
                <li><a href="#" class="action-btn">导出数据报告</a></li>
            </ul>
        </section>

        <!-- 系统通知 -->
        <section class="notifications">
            <h3>系统通知</h3>
            <ul class="notify-list">
                <li>【提示】VR002 设备电量低，请及时充电</li>
                <li>【警告】检测到未授权访问尝试</li>
                <li>【更新】新版本固件已发布</li>
            </ul>
        </section>

    </aside>

</main>

<!-- JavaScript 脚本 -->
<script>
    // 模拟添加设备
    const addDeviceBtn = document.querySelector('.add-device-btn');
    const deviceTable = document.getElementById('deviceTable');

    let deviceCount = 2;

    addDeviceBtn.addEventListener('click', () => {
        deviceCount++;
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>VR00${deviceCount}</td>
            <td>未连接</td>
            <td>20%</td>
            <td>--</td>
        `;
        deviceTable.appendChild(newRow);
    });

    // 初始化 ECharts 图表
    const chartDom = document.getElementById('chart-container');
    const myChart = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['设备电量']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: {
            type: 'value',
            name: '电量 (%)'
        },
        series: [{
            name: '设备电量',
            type: 'line',
            smooth: true,
            itemStyle: { color: '#9c27b0' },
            data: [85, 82, 75, 68, 60, 55, 50]
        }]
    };

    myChart.setOption(option);
</script>

</body>
</html>